<!DOCTYPE html>
<html>
<head>
    <meta name="x5-cache" content="enable">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="apple-mobile-web-app-title" content="QA">
    <meta name="theme-color" content="#f2991b">
    <meta property="og:title" content="QA">
    <meta property="og:description" content="QA">
    <title>Question</title>
    <meta name="Keywords" content="QA">
    <script type="text/javascript">
        (function(doc, win) {
            var fontSize,docEl = doc.documentElement,
                resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    fontSize = 10 * (clientWidth / 320);
                    if(fontSize && fontSize <= 16){
                        docEl.style.fontSize = fontSize + 'px';
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style type="text/css">
    	.remindbox {
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 100;
    	}
    	.remindmain {
			width: 280px;
			background: #fff;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
			z-index: 200;
			border-radius: 20px;
    	}
    	.remindclose{
    		position: absolute;
    		width: 28px;
    		height: 28px;
    		top: -22px;
    		right: -22px;
    		border-radius: 14px;
    		background: red;
    	}
		.remindtitle {
			font-size: 14px;
			color: #000000;
			margin: 25px 20px 0;
			text-align: left;
		}
		.godetail{
			margin: 0px 20px;
			font-size: 14px;
			color: #446889;
			text-align: left;
		}

		.remindold, .remindnew{
			height: 40px;
			line-height: 40px;
			width: 200px;
			font-size: 16px;
			border-radius: 45px;
			margin-left: auto;
			margin-right: auto; 
		}

		.remindold{
			margin-top: 20px;
			background: #FF6633;
			color: #fff;
		}

		.remindnew{
			margin-top: 10px;
			margin-bottom: 20px;
			color: #FF6633;
			position: relative;
		}

		.remindnew:after{
			position: absolute;
			content: '';
			left: 0;
			top: 0;
			border: 1px solid #FF6633;
			transform: scale(0.5);
			transform-origin: 0 0;
			width: 200%;
			height: 200%;
			border-radius: 45px;
		}
		.remindweight{
			font-weight: bold;
		}
    </style>
</head>
	<body>
		<div class="remindbox">
            <div class="remindmain">
            	<div class="remindclose"></div>
				<div class="remindtitle">
					<span class="remindweight">该账号“小马甲”绑定的手机号已经在美团更新为：180****5221，</span>请使用新手机号登录改账号。继续使用13733333333登录将创建新账号。
				</div>
				<div class="godetail">了解详细原因</div>
            	<div class="remindold">使用180****5221登录</div>
            	<div class="remindnew">创建新账号登录</div>
            </div>
        </div>
	</body>
</html>



